<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>编辑用户</title>
  <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-form" lay-filter="sys-user-form" id="sys-user-form">
      <input type="hidden" name="id" id="id">
      <input type="hidden" id="avatar" name="avatar">
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline layui-upload">
          <div class="layui-upload-list">
            <img class="layui-upload-img" onclick="fun.preview(this)" id="upload-img" width="100px" height="100px" src="/static/img/def_profile.jpg">
            <p id="upload-text"></p>
          </div>
          <button type="button" class="layui-btn" id="upload-btn">上传</button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" name="nickName" lay-verify="required" placeholder="请输入昵称" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
          <input readonly type="text" name="userName" lay-verify="required" placeholder="请输入用户名" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
          <input type="text" name="phonenumber" lay-verify="required|phone|number" placeholder="请输入手机号码" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户邮箱</label>
        <div class="layui-input-inline">
          <input type="text" name="email" lay-verify="required|email" placeholder="请输入用户邮箱" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block" id="enabled"></div>
      </div>
      <div class="layui-form-item" lay-filter="sex">
        <label class="layui-form-label">选择性别</label>
        <div class="layui-input-block" id="sex"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
          <div id="roleName" class="xm-select-demo"></div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
          <input id="deptId" name="deptId" type="hidden">
          <div id="deptName" lay-filter="deptName" class="xm-select-demo"></div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">岗位</label>
        <div class="layui-input-inline">
          <div id="postName" class="xm-select-demo"></div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
          <textarea class="layui-textarea" name="remark" placeholder="请输入备注"></textarea>
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
      </div>
    </div>
  </div>
</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        xmSelect: 'xm-select'
    }).use(['index', 'form','xmSelect','upload','crud','treeSelect'], function(){
        let $ = layui.$,
                xmSelect = layui.xmSelect,
                treeSelect = layui.treeSelect,
                upload = layui.upload,
                crud = layui.crud,
                form = layui.form,
                sysUser = [[${sysUser}]];
        $('#upload-img').attr('src', sysUser.avatar); //图片链接（base64）
        form.val('sys-user-form', sysUser);
        form.on('submit(save-submit)', function(data) {
            $.ajax({
                type: 'POST',
                url:  ctx + '/sysUser/edit',
                data: JSON.stringify(data.field),
                contentType:'application/json;charset=UTF-8',
                dataType: 'json',
                success: function(result) {
                    layer.msg(result.message);
                    if (result.code === 200) {
                        let index = parent.layer.getFrameIndex(window.name);
                        // 关闭
                        parent.layer.close(index);
                        // 刷新
                        parent.location.reload();
                    }
                }
            });
        });
        let roleSelect = xmSelect.render({
            el: '#roleName',
            tips:"选择角色",
            filterable: true,
            name: "roleIds",
            tree: {
              //是否显示树状结构
              show: true,
              //是否展示三角图标
              showFolderIcon: true,
              //是否显示虚线
              showLine: true,
              //间距
              indent: 20,
              //默认展开节点的数组, 为 true 时, 展开所有节点
              expandedKeys: [ -3 ],
              //是否严格遵守父子模式
              strict: false,
              //是否开启极简模式
              simple: false,
              //点击节点是否展开
              clickExpand: true,
              //点击节点是否选中
              clickCheck: true
            },
            toolbar: {
              show: false
            },
            height: 'auto',
            data: [],
            //分页
            paging: true,
            //每页条数
            pageSize: 10,
        });
        let roleParams = sysUser.roleIds ? '?ids=' + sysUser.roleIds : '';
        $.ajax({
            type: 'get',
            url: ctx + '/sysRole/xmSelect' + roleParams,
            success: function(res) {
              roleSelect.update({
                    data: res
              })
            }
        });

        let postSelect = xmSelect.render({
          el: '#postName',
          tips:"选择岗位",
          name: "postIds",
          filterable: true,
          tree: {
            //是否显示树状结构
            show: true,
            //是否展示三角图标
            showFolderIcon: true,
            //是否显示虚线
            showLine: true,
            //间距
            indent: 20,
            //默认展开节点的数组, 为 true 时, 展开所有节点
            expandedKeys: [ -3 ],
            //是否严格遵守父子模式
            strict: false,
            //是否开启极简模式
            simple: false,
            //点击节点是否展开
            clickExpand: true,
            //点击节点是否选中
            clickCheck: true
          },
          toolbar: {
            show: false
          },
          height: 'auto',
          data: [],
          //分页
          paging: true,
          //每页条数
          pageSize: 10,
        });

        let postParams = sysUser.postIds ? '?ids=' + sysUser.postIds : '';
        $.ajax({
          type: 'get',
          url: ctx + '/system/sysPost/xmSelect' + postParams,
          success: function(res) {
            postSelect.update({
              data: res
            })
          }
        });

        //普通图片上传
        let uploadInst = upload.render({
            elem: '#upload-btn'
            ,url: ctx + '/common/uploadMinIo'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-img').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                if (res.code === 200) {
                    $("#avatar").val(res.data.url);
                    return layer.msg('上传成功');
                }
            }
            ,error: function() {
                //演示失败状态，并实现重传
                let uploadText = $('#upload-text');
                uploadText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                uploadText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
        treeSelect.render({
          // 选择器
          elem: '#deptName',
          // 数据
          data: ctx + '/system/sysDept/treeSelect',
          // 异步加载方式：get/post，默认get
          type: 'get',
          // 占位符
          placeholder: '请输入部门',
          // 是否开启搜索功能：true/false，默认false
          search: true,
          // 点击回调
          click: function(d){
            $("#deptId").val(d.current.id);
            $("#deptName").val(d.current.name);
          },
          // 加载完成后的回调函数
          success: function (d) {
            if (sysUser.deptId) {
              treeSelect.checkNode('deptName', sysUser.deptId);
              treeSelect.refresh('deptName');
            }
          }
        });
        crud.setRadio("enabled","enabled",sysUser.enabled);
        crud.setRadio("sex","sex",sysUser.sex);
    })
</script>
</body>
</html>